<template>
	<div class="myLabel">
		<component-title :title-text="'我的标签'"></component-title>
	  <div class="labelContent" v-show = 'status == 0'>
	    <ul>
	      <li>
	        <div class="fl">
	          <img src="~@/assets/images/red2x.png" alt="" class="fl" />
	          <span class="label" v-text = 'labelData.match_count_index_label'></span>
	        </div>
	        <div class="dec">您一共交易了
						<span class="msg" v-text = 'labelData.match_count'></span>次，超越了
						<span class="msg" v-text = 'labelData.match_count_index'></span>%的用户（包含基金交易次数）</div>
	      </li>
	      <li>
	        <div class="fl">
	          <img src="~@/assets/images/orange2x.png" alt="" class="fl" />
	          <span class="label" v-text = 'labelData.profit_rate_amplitude_index_label'></span>
	        </div>
	        <div class="dec">您的收益波幅为<span class="msg" v-text = 'labelData.profit_rate_amplitude'></span>%</div>
	      </li>
	      <li>
	        <div class="fl">
	          <img src="~@/assets/images/yellow2x.png" alt="" class="fl" />
	          <span class="label" v-text = 'labelData.qty_index_label'></span>
	        </div>
	        <div class="dec">您一共持仓了<span class="msg" v-text ='labelData.qty'></span>支股票</div>
	      </li>
	    </ul>
	  </div>
	  <return-empty v-show = 'status == 1'></return-empty>
	  <return-error v-show = 'status == 2'></return-error>
	</div>
	</template>
	<script>
	import RemoteDAO from '@/common/remoteDAO'
	import constant from '@/common/constant'
	import Title from '@/components/Title'

	export default {
	  props: ['fathertime','assetStat'],
	  data(){
	    return {
	      	labelData: {},
					timeIn:'',
					pagenum:'',
					status:0
	    }
	  },
	  components:{
	  	'component-title':Title
	  },
	  created() {
	    this.initMyLabel();
	  },
		watch:{
			fathertime:function() {
				this.initMyLabel();
			},
			assetStat:function(){
				this.initMyLabel();
			}
		},
	  methods: {
	    initMyLabel() {
	      this.pagenum = constant.TimeTabData[this.fathertime].num;
	      this.timeIn = constant.TimeTabData[this.fathertime].name;

	      RemoteDAO.callZL13100044({
	      	pagenum:this.pagenum,
	        recent: this.timeIn
	      }, this.ZL13100044);
	    },
	    ZL13100044(result) {
		      if (result.error == '1') {
					this.status = 2;
					return;
		      } else {
		        let data = result.data;
			      let bigdata = JSON.parse(data).body[0].bigdata;
			      let specData = JSON.parse(bigdata).hits.hits;
		        if(specData.length == 0){
							this.status = 1;
							return;
		        }else{
						this.status = 0
			       this.labelData = specData[0]._source;
		        }
		      }
	    }
	  }
	}
	</script>
<style scoped>
.myLabel{
	background: #fff;
	margin-top: 15px;
	padding: 40px 0;
}
.labelContent {
  font-size: 24px;
  text-align: center;
  color: #999;
}

.labelContent li {
  margin-top: 58px;
  display: inline-block;
}

.labelContent li img {
  display: inline-block;
  width: 140px;
  height: 100%;
}

.labelContent li .label {
  display: inline-block;
  text-align: center;
  width: 120px;
  height: 100%;
  margin-left: -150px;
  line-height: 44px;
  color: white;
}

.labelContent li .dec {
  text-align: left;
  width: 480px;
  margin-left: 170px;
}

.labelContent li:first-child .dec {
  margin-top: -7px;
}

.labelContent li .msg {
  color: red;
}
</style>
